<template>
  <div>
    <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item,index) in albumData" :key="index">
            <span class="swiper-slide-title">{{item.name}}</span>
          <img v-lazy="item.picUrl+'?param=120y120'"/>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
    props:['albumData'],
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        initialSlide:1,
        resizeObserver:true,
        on:{
          resize:function(){
            this.update()
          }
        },
        coverflowEffect: {
          rotate: 50,
          stretch: 6,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
      },
    };
  },
};
</script>


<style scoped>
   .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 120px;
      text-align: center;
      font-size: 24px;
      background-color: #efefef;
      background-size: cover;
      color: white;
   }
   
  .swiper {
    height: 100%;
    width: 100%;
    }
    .swiper-slide{
       position: relative;
   }
   .swiper-slide-title{
       position: absolute;
       bottom: 0;
       left: 0;
       text-align: left;
       padding: 6px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
   }
    .swiper-slide-title{
        font-size: 12px;
        color: white;
        background: rgba(0, 0, 0, 0.5);
    }
</style>